Query basic product infor through admin api occur "CORS error(Crossing origin resource sharing err)"

[FrankLi]

Hi all, I am use apollo graphql package to do graphql query operations. here is the basic code:

// this basic ApolloClient object info 
const client = new ApolloClient({
    uri:uriNew,
    cache:new InMemoryCache(),
    request: operation => {
      operation.setContext({
        headers: {
          "X-Shopify-Access-Token": accessToken,
          "Content-type" : "application/json",

        }
      });
    },
    credentials:"include"

  });

// below is the TestQuery.js file. 
function TestQuery(){
  const QUERY_GQL = gql`
      query helloworld($id: ID!){
        product(id: $id) {
           title
           handle
           descriptionHtml
           id
        }
      }
    `;


  const {loading, error, data} = useQuery(QUERY_GQL,{variables:{ id: "gid://shopify/Product/xxxxxxId" }});
  if(loading) console.log("Loading");
  else if(error) {
    console.log(error);
  }
  return (

    <div>
            <p>{data.product.title}</p>
     </div>
  );
}

export default TestQuery;

//the TestQuery used in another file, i confirm that the root element contains ApolloProvider. 

this is the screenshot of the error :

package used : apollo/Client. 

By the way : project created by the shopify-cli use "react-apollo, graphql-tag, app-bridge-react" , it uses "useAppBridge()" call before new a apolloClient and in this way :

  const client = new ApolloClient({
    //Return an authenticated fetch function
    fetch: userLoggedInFetch(app),
    fetchOptions: {
      // 指的是web api request中 是否一直发送凭证
      credentials: "include",
    },
  });

official react app demo use Query tag from react-apollo to do graphql query call like this :

it works fine. so i am confused. Anyone could help? many thanks. 

[FrankLi · Accepted solution]

I solved it by use this code, but i don't where occurs CORS error....

  const app = useAppBridge();
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: createHttpLink({
      credentials: "include",
      headers: {
        "Content-Type": "application/graphql",
      },
      fetch: authenticatedFetch(app),
    }),
  });

ApolloClient , i use the apollo/client package instead of deprecated react-apollo .