0

First time using Hot Chocolate and Apollo and I have an issue where the Apollo client created always returns 404 for the Hot Chocolate API. This API is running on localhost and can be queried fine.

Whats weird is, if I use the Apollo Client getServerSideProps, the query returns fine.

EG This is working

export async function getServerSideProps() {
const { data } = await client.query({
    query: gql`
    query {
        rolesQuery {
            roles {
                id
                name
            }
        }
    }
  `,
});

return {
    props: { roles: data.rolesQuery.roles, },
};
}

This does not

export function createApolloClient() {
const httpLink = createHttpLink({
    uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
    fetchOptions: {
        mode: 'no-cors',
    },
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
});

return client;
}

// Usage of the client
const apolloClient = createApolloClient();
<ApolloProvider client={apolloClient}>...</ApolloProvider>

At first I had a CORS issue which is fixed but I'm still getting a 404 when calling this from a hook inside a component (using graphql-codegen version 2.6.1).

Any ideas?

Edit Front end component calling mutation

import React from "react";
import { gql, useMutation } from '@apollo/client';

const REGISTER = gql`
mutation RegisterUser ($email: String!, $password: String!) {
  usersMutation {
    registerUser (request: { email: $email, password: $password}) {
      id
      firstName
      email
    }
  }
}
`;

const SignUp = () => {
    const [registerUser, { data, loading, error }] = useMutation(REGISTER);
    console.log(registerUser())

    return <div>code removed for brevity </div>;
};

export default SignUp;
Kurtis
  • 1,172
  • 2
  • 12
  • 20
  • Can you show the code where the request is made from the client-side? Also, make sure you're making the request against the right URL. – juliomalves Feb 14 '22 at 14:37
  • I have added the frontend component which calls the component. The URL I have put in the client side is the banana-cake-pop url: `http://localhost:5090/graphql` which works for the code in `getServerSideProps`. I'm definitely doing something wrong. – Kurtis Feb 14 '22 at 22:15
  • 1
    Turns out its nothing to do with the mutation. I got this working by using HttpLink rather than createHttpLink. I'm still not sure why though. – Kurtis Feb 16 '22 at 17:20

0 Answers0