React-apollo: Getting "Variable was not provided" but variable is there

[olistic]

Hey! I'm decorating a component using graphql and I'm getting the following error:

Variable "$token" of required type "String!" was not provided.

However, the variable token is being provided (I can also see it's there by inspecting the APOLLO_QUERY_INIT action).

// MyComponent.jsx

const GET_PROFILES = gql`
  query getProfiles($token: String!) {
    player(token: $token) {
      profiles {
        id
      }
    }
  }
`;

const withData = graphql(GET_PROFILES, {
  options() {
    return {
      variables: {
        token: 'shhhhhhh',
      },
    };
  },
});

export default withData(MyComponent);

Am I doing anything wrong?

[olistic]

I figured it out, it was a problem with my server implementation actually (I'm not using apollo-server). I thought variables were merged into the query string in the client, while they are sent along with the query in the request and need to be handled by the server.

Passing the variables body param to the graphql function solved it.

[hems]

@olistic jeezzz, thanks for that! i was killing myself changing my frontend code just to find out i also wasn't sending variables along on the server!

[lechneal]

@olistic omg, thanks so much! I was also stuck for hours. I'm using apollo-client and graphql-tools to mock the data.
Passing the request variables to the graphql function worked like a charm:
graphql(executableSchema, request.query, null, null, request.variables)

[galileomd]

@olistic wait could you spell out how the function writeup would look?
`` const GET_PROFILES = gql
query getProfiles($token: String!) {
player(token: $token) {
profiles {
id
}
}
}
`;

const withData = graphql(GET_PROFILES, {
options() {
return {
variables: {
token: 'shhhhhhh',
},
};
},
* how do variables get inserted here ? *
});

export default withData(MyComponent);

[mridulsri]

Thanks, @galileomd, and @olistic your approach solved my issue.

[polson]

I can't believe this isn't part of the documentation...