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

Retired Boards Appdev Tools
1

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 (

    
            

{data.product.title}

     

  );
}

export default TestQuery;

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

this is the screenshot of the error :

FrankLi_0-1628069201911.png
FrankLi_0-1628069201911.png2698×659 52.3 KB

FrankLi_1-1628069222239.png
FrankLi_1-1628069222239.png910×178 9.06 KB

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 :

FrankLi_0-1628069506132.png
FrankLi_0-1628069506132.png1583×516 30.8 KB

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

2

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 .