To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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

Solved
FrankLi
Tourist
11 2 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 (

    <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 :

FrankLi_0-1628069201911.pngFrankLi_1-1628069222239.png

 

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

 

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

Accepted Solution (1)

Accepted Solutions
FrankLi
Tourist
11 2 1

This is an 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 . 

View solution in original post

Reply 1 (1)
FrankLi
Tourist
11 2 1

This is an 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 .