https://www.growthbook.io/ logo
Powered by
d

damp-angle-95696

02/24/2022, 7:39 AM
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

fresh-football-47124

02/24/2022, 7:53 AM
Can you share the full implementation code snippets?
d

damp-angle-95696

02/24/2022, 9:12 AM
_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

fresh-football-47124

02/24/2022, 9:35 AM
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

damp-angle-95696

02/24/2022, 9:58 AM
I have installed the Chrome extension as well. However, it is empty.
f

fresh-football-47124

02/24/2022, 10:00 AM
sorry about that. @future-teacher-7046 will be able to help you in a few hours
🙏 1
f

future-teacher-7046

02/24/2022, 1:46 PM
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

damp-angle-95696

02/24/2022, 1:48 PM
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

future-teacher-7046

02/24/2022, 1:50 PM
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

damp-angle-95696

02/24/2022, 2:15 PM
console.log(useFeature('should-show-product-title'))
f

future-teacher-7046

02/24/2022, 2:23 PM
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

damp-angle-95696

02/24/2022, 2:29 PM
the useEffect hook is actually called in _app.tsx
f

future-teacher-7046

02/24/2022, 2:38 PM
If you add a console.log in that hook, do you see that it's being called?
d

damp-angle-95696

02/24/2022, 2:41 PM
yes, i add 
console.log()
in that hook, and see the message in browser console
f

future-teacher-7046

02/24/2022, 2:56 PM
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
5 Views
Powered by