https://www.growthbook.io/ logo
Join Slack
Powered by
when I called API `<https://cdn.growthbook.io/api/...
# contributing
d
when I called API 
<https://cdn.growthbook.io/api/features/key_dev_xxxxxx>
, the result I got is
Copy code
{
  "status": 200,
  "features": {
    "should-show-product-title": {
      "defaultValue": true
    }
  }
}
However, when I do 
useFeature('should-show-product-title').on
, the result is false instead. So, what might be the root cause of these different results?
f
Can you share the full implementation code snippets?
d
_app.tsx
Copy code
const growthbook = new GrowthBook({
  trackingCallback: (experiment, result) => {
    console.log({
      experimentId: experiment.key,
      variationId: result.variationId
    })
  }
});

function MyApp({ Component, pageProps, cart, categories, user }: Props) {
  const windowWidth = useWindowResize();
  const getLayout = Component.getLayout || ((page) => !(windowWidth && windowWidth < RWD_BREAK_POINT.md) ? <Desktop>{page}</Desktop> : <Mobile>{page}</Mobile>);
  const router = useRouter();

  useEffect(() => {
    fetch("<https://cdn.growthbook.io/api/features/key_dev_xxx>")
      .then((res) => res.json())
      .then((parsed) => {
        console.log(parsed);
        growthbook.setFeatures(parsed);
      });
  }, [router.pathname]); 
...
return (
    <SSRProvider>
      <GrowthBookProvider growthbook={growthbook}>
        <GlobalContextProvider
          categories={categories}
          user={user}
        >
          <CartContextProvider
            cartProducts={cart}
          >
            <ModalContextProvider>
              {getLayout(<Component {...pageProps} />)}
            </ModalContextProvider>
          </CartContextProvider>
        </GlobalContextProvider>
      </GrowthBookProvider>
    </SSRProvider>
  );
ProductDetail.tsx
Copy code
import { useFeature } from "@growthbook/growthbook-react";

interface Props {
  product: IProduct;
  referer: string;
}

function ProductDetail({ product, referer }: Props) {
  const windowWidth = useWindowResize();
  const newLogin = useFeature('should-show-product-title').on;

  return (
    <Col md="5" xl="4" className={styles['col-product-detail']}>
      <Container fluid className={styles['product-detail']}>
        <Row className={`position-relative ${styles['row-product-title']}`}>
          {windowWidth && windowWidth < RWD_BREAK_POINT.md ? null : <ProductBreadCrumb referer={referer} productTitle={product.title} />}
          {newLogin ? <h2>Hello World</h2> : <h2>{product.title}</h2>}
        </Row>
in 
_app.tsx
, I create a growthbook instance and set features via reading cloud api with dev key. Then, wrap my app with 
GrowthBookProvider
in 
ProductDetail.tsx
I tried to read the value of 
should-show-product-title
feature which i expect to be true
This is the response from growthbook api about my feature
Copy code
{
  "status": 200,
  "features": {
    "should-show-product-title": {
      "defaultValue": true
    }
  }
}
f
that looks okay
do you have the GrowthBook devtools?
it will show you what variation you're getting
Copy code
// Fall back to using the default value
    return this.getFeatureResult(
      id,
      feature.defaultValue ?? null,
      "defaultValue"
    );
it should default properly
Jeremy can help you in a few hours when he's up
d
I have installed the Chrome extension as well. However, it is empty.
f
sorry about that. @future-teacher-7046 will be able to help you in a few hours
🙏 1
f
Hi @damp-angle-95696. Is this happening in SSR or client side? In SSR, useEffect hooks don't fire, so it will never fetch the features JSON with the code you are currently using. Instead, you would need to fetch and wait for it to load before rendering your app.
d
https://dev.to/jdorn/feature-flags-with-nextjs-and-growthbook-4ide I just followed this article written by you
that is why i feel weird how come it does not work 🥲
f
Can you console.log the entire response from the useFeature hook? There should be a 
source
property that says why it is getting the value that it is.
d
console.log(useFeature('should-show-product-title'))
f
Can you see if the useEffect hook (where you are fetching the features) is being called?
That tutorial was mostly made with SSG and client-side rendering in mind. It should still mostly work for SSR, but might require a few tweaks in how features are fetched.
d
the useEffect hook is actually called in _app.tsx
f
If you add a console.log in that hook, do you see that it's being called?
d
yes, i add 
console.log()
in that hook, and see the message in browser console
f
So based on those console logs, it looks like you are evaluating the feature before the JSON file is parsed and loaded. So that's why it's returning 
unknown feature.
The GrowthBook provider is supposed to re-render the application when the features finish loading. But that doesn't seem like it's happening for you and I'm not sure why
127 Views
Open in Slack
PreviousNext
Powered by