# Apollo/client error INVARIANT ERROR 31

**URL:** <https://community.apollographql.com/t/apollo-client-error-invariant-error-31/5426>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [January 7, 2023, 11:08am UTC](https://community.apollographql.com/t/apollo-client-error-invariant-error-31/5426 "2023-01-07T11:08:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![okormoru\_praise](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/okormoru_praise/32/3686_2.png) [@okormoru\_praise](https://community.apollographql.com/u/okormoru_praise)\
**Post date:** [January 7, 2023, 11:08am UTC](https://community.apollographql.com/t/apollo-client-error-invariant-error-31/5426/1 "2023-01-07T11:08:56Z")

</div>

im using the apollo client api to fetch data from an api source  
when i run npm run build

i get an invariant error 31  
which states

```auto
Could not find "client" in the context or passed in as an option. ' +
        'Wrap the root component in an <ApolloProvider>, or pass an ApolloClient ' +
        'instance in via options.

```

But my code is corrects and it works well on the localhost

i tried downgrading the apolloclient version  
but i still get the error

this is my code

```auto
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { useQuery, gql } from '@apollo/client'

export default function Data() {
      let Query = gql`{
        posts(first: 1000000000000000) {
          id
          title
          body
          date
          tag
          coverpic {
            id
            url
          }
        }
      }
      `

  const {error, loading, data} = useQuery(Query)
  console.log(data)
  if(error){
    return(
        <div>e</div>
    )
  }
  if(loading){
    return(
        <div>l</div>
    )
  }
  return (
  <div>
    {data.posts.map(thu => {
        return(
            <div key={thu.id}>{thu.title}</div>
        )
    })}
  </div>
  )
}

```

THIS IS MY INDEX.JS

```auto
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { useQuery, gql } from '@apollo/client'

export default function Data() {
      let Query = gql`{
        posts(first: 1000000000000000) {
          id
          title
          body
          date
          tag
          coverpic {
            id
            url
          }
        }
      }
      `

  const {error, loading, data} = useQuery(Query)
  console.log(data)
  if(error){
    return(
        <div>e</div>
    )
  }
  if(loading){
    return(
        <div>l</div>
    )
  }
  return (
  <div>
    {data.posts.map(thu => {
        return(
            <div key={thu.id}>{thu.title}</div>
        )
    })}
  </div>
  )
}

```

PLS HELP ME I DONT KNOW WHAT ELSE TO DO

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [January 10, 2023, 4:48pm UTC](https://community.apollographql.com/t/apollo-client-error-invariant-error-31/5426/2 "2023-01-10T16:48:11Z")

</div>

Hi @okormoru_praise 👋 welcome to the community forum! It sounds like your code is working in your development environment but not in a production build. That may indicate an issue with your build script. Could you paste the line that starts with `"build"` in your `package.json` under `"scripts"`? That could help the community narrow down what might be the issue.