React apollo sends POST request instead of GET while querying graphql - reactjs

I'm trying to get more familiar with graphql using react-apollo and I'm stuck for a while now.
I just want to query movies by name from a gql server, but no luck so far. My problem is that when I make the request I get an error that says:
POST https://tmdb.sandbox.zoosh.ie/dev/grphql 400
However I want to make a GET request. I tried to specify the request method in the apollo client, but no luck either.
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
} from "#apollo/client";
import "./index.css";
import App from "./App";
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
method: "GET",
}),
connectToDevTools: true,
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>
);
MovieList.js
import React from "react";
import { useQuery, gql } from "#apollo/client";
const SEARCH_MOVIES = gql`
query SearchMovies($movieTitle: String!) {
movies(query: $movieTitle) {
id
name
score
genres {
name
}
overview
releaseDate
}
}
`;
const MovieList = () => {
const { loading, error, data } = useQuery(SEARCH_MOVIES, {
variables: {
movieTitle: "fight club",
},
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<>
<div>MovieList</div>
<ol>
{data.movies.map((movie) => (
<li key={movie.id}>{movie.name}</li>
))}
</ol>
</>
);
};
export default MovieList;
Now I would appriciate, if someone could help me out what the problem might be, because my eyes can't see it. I searched all over the internet, but didn't find any usable resource regarding the topic.
Thanks for the replies in advance!:)

You can use useGETForQueries as constructor options.
docs
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
useGETForQueries: true
}),
connectToDevTools: true,
});

Related

How to solve `Error : $Unexpected token N in JSON at position 0 ` in react graphql apollo client

I need guidance on whether I can use an address such as mealDB API or randomuser.com/api in GraphQL or not, and I will post a test code example.
I just want to use it in the front to fetch data
import './App.css';
import React, { FC } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from "#apollo/client"
import ShowUsers from './showUsers';
const client = new ApolloClient({
uri: 'https://randomuser.me/api/',
cache: new InMemoryCache(),
})
const App= () => {
return (
<ApolloProvider client={client}>
<ShowUsers />
</ApolloProvider>
);
}
export default App;

TypeError: Cannot read property 'useContext' of null nextjs

I am going to get user from context and use it in header in nextjs strapi apollo graphql project User is accessable in App function but outside its giving above error. Is context values accessable outside function if yes how can I access it if no how to structure it so that I can use it in request header.
import "../styles/globals.css";
import Layout from "../components/Layout";
import { Provider } from "../context/AppContext";
import Cookies from "js-cookie";
import withApollo from "next-with-apollo";
import { BACKEND_URL } from "../helpers";
import React, { useContext } from "react";
import { AppContext } from "../context/AppContext";
import { ApolloClient, ApolloProvider, InMemoryCache } from "#apollo/client";
const { user } = useContext(AppContext);
console.log("user from context in _app", user);
function App({ Component, pageProps, apollo }) {
return (
<Provider>
<ApolloProvider client={apollo}>
<Layout>
<Component {...pageProps} />
</Layout>
</ApolloProvider>
</Provider>
);
}
export default withApollo(({ initialState, headers }) => {
return new ApolloClient({
uri: `${BACKEND_URL}/graphql`,
cache: new InMemoryCache().restore(initialState || {}),
...(user && {
headers: {
authorization: `Bearer ${user.token}`,
},
}),
});
})(App);
On my machine, Next.js didn't work if, in Windows Terminal, the disk letter (for example, C:) of the "current directory" was written in lowercase (as c: in this example).
After I changed the current directory from c:\dev\project to C:\dev\project, the error went away.
Source: https://github.com/vercel/next.js/issues/7626#issuecomment-541430221

AppSync client doesn't returns data

I need some pro advice here because I am going a little crazy. I am trying to create an graphql client combining Apollo and AppSync. I've done this approach before, but it is not working in another project I've just created. My situation is the following:
It seems that the client is connecting to my AppSync server (it is returning the __typename in the data), but It is not returning anything else. This is an example of the client use and the response I am getting:
const response = client
.query({
query: gql`
query MyQuery {
listSys_users {
items {
email
name
active
user_id
}
}
}
`,
})
.then(console.log);
I've tried to call the server making a POST request with axios and it works perfectly fine:
const axiosWrapper = () => {
const defaultOptions = {
baseURL: envConfig.graphQLUrl,
headers: { 'x-api-key': envConfig.graphQLApiKey },
};
const instance = axios.create(defaultOptions);
return instance;
};
axiosWrapper.post('', {
query: `
query MyQuery {
listSys_users {
items {
email
name
active
user_id
}
}
}
`,
}).then(console.log);
Now that You know the situation I will share my attempts on this:
Right know I have something like this:
The client.js:
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';
const { graphQLUrl, region, graphQLApiKey } = config;
const auth = {
type: 'API_KEY',
apiKey: graphQLApiKey,
// jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
};
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
operation.setContext(({ headers = {} }) => ({
headers: {
...headers,
'x-api-key': 'MY_API_KEY',
accept: 'application/json, text/plain, */*',
'content-type': 'application/json;charset=UTF-8',
},
}));
return forward(operation);
});
const client = new ApolloClient({
link: ApolloLink.from([authMiddleware, new HttpLink({ uri: graphQLUrl })]),
cache: new InMemoryCache(),
});
export default client;
The App.js:
import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import { Provider } from 'react-redux';
import App from './App';
import store from './store/reducers/rootReducer';
import './helpers/Translation/i18n';
import Login from './pages/Login';
import client from './client';
ReactDOM.render(
<ApolloProvider client={client}>
<BrowserRouter>
<Provider store={store}>
<Login>
<App />
</Login>
</Provider>
</BrowserRouter>
</ApolloProvider>,
document.getElementById('root')
);
Package.json:
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-http": "^1.5.17",
"aws-amplify": "^3.3.27",
"aws-amplify-react-native": "^4.3.2",
"aws-appsync": "^4.1.4",
"aws-appsync-react": "^4.0.10",
"graphql": "^15.6.1",
"graphql-tag": "^2.12.5",
In this case the response is the same, it is connecting but it returns null in the items.
Yes, I know, I should use the creatAuthLink from aws-appsync-auth-link. Thats my second attempt.
My second attempt was using createAuthLink, but when I tried to use it It throw this error:
./node_modules/aws-appsync-auth-link/lib/auth-link.js
Module not found: Can't resolve '#apollo/client/core' in '/Users/VIU/GEOACTIO/smart-pockets/smart-pockets-react/node_modules/aws-appsync-auth-link/lib'
So I ended up installing and using the #apollo dependencies:
client.js:
import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from '#apollo/client';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';
const { graphQLUrl, region, graphQLApiKey } = config;
const auth = {
type: 'API_KEY',
apiKey: graphQLApiKey
};
const client = new ApolloClient({
link: ApolloLink.from([
createAuthLink({ auth, region, url: graphQLUrl }),
new HttpLink({ uri: graphQLUrl }),
]),
cache: new InMemoryCache(),
});
export default client;
package.json:
"#apollo/client": "^3.4.16",
...all the same
Still getting the same response.. I won't bother You with more attempts. I've tried all the possible combination between these and more apollo / graphql / appsync dependencies and the outcome is always the same: either I get the null response with the __typename or I get a dependencies error.
NOTE: I've noticed that when using axios, the lambda attached to that resolver fires up as it should, but when using another approach, the lambda doesn't fire up, so obviously it won't return any data.
I know it is a long post but I am trying to explain the best I can my situation. And I can't create a sandbox code because I don't want to expose the API credentials.. Any ideas of what I am doing wrong?
Thanks in advance!!

Cannot connect React to Graphene using GraphQL

So create graphene query and works on GraphiQL, I'm trying to connect it to react using apollo client but I keep getting error.
On Django the error is
graphql.error.located_error.GraphQLLocatedError: 'AnonymousUser' object is not iterable
on React the error is Error! 'AnonymousUser' object is not iterable
As you can see here, it's working on GrahiQL
Here is my setup
URL
path("graphql/", csrf_exempt(GraphQLView.as_view(graphiql=True))),
SETTINGS
CORS_ORIGIN_WHITELIST = [
"http://localhost:3000",
"http://127.0.0.1:3000"
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
....
]
INSTALLED_APPS = [
.....
"graphene_django",
'corsheaders',
]
INDEX.JS
import React from "react";
import { ApolloProvider, ApolloClient, InMemoryCache } from "#apollo/client";
const client = new ApolloClient({
uri: "http://localhost:8000/graphql/",
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);
In EMPLOYEELIST.JS
import { useQuery, gql } from "#apollo/client";
const EMP = gql`
query getEmployees {
allEmployees {
id
fullName
isActive
hourlyRate
slug
paystubData
}
}
`;
export const ListEmployee = () => {
const { loading, error, data } = useQuery(EMP);
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
const [records, setRecords] = useState(data.allEmployees);
...
return(
.....)
I tested the react component with localstorage first and everything was fine there too, now bring the two together, I'm getting this error. I don't know what I'm missing here really.
Any help will be appreciated.

Using graphql-tools, apollo-link-schema, and react-hooks always returning undefined when mocking

I'm new to using GraphQL in React and have been moving a project from a REST API to a new GraphQL one. As part of this, I wanted to setup mock data to work on the application independent of the GQL API being completed. I've spent a bunch of time trying to follow the Apollo and GraphQL Tools docs but no matter what, I can't seem to get the mock resolvers to work properly. For context, I am using this in a NextJS/React app, and here's a minimum example of what I'm trying to do:
Setup App.js
import React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { makeExecutableSchema } from '#graphql-tools/schema';
import { addMocksToSchema } from '#graphql-tools/mock';
export default function App() {
const schema = makeExecutableSchema({typeDefs:`
type Query {
getPerson: Person!
}
type Person {
name: String!
}
`});
const mocks = {
Query: () => ({
getPerson: () => ({
name: () => "Name"
})
})
}
addMocksToSchema({ mocks, schema });
const link = new SchemaLink({ schema });
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
connectToDevTools: true
});
return (
<ApolloProvider client={client}>
<Person />
</ApolloProvider>
)
}
Person.js
import React from 'react';
import { useQuery } from '#apollo/react-hooks';
import gql from 'graphql-tag';
export default function Person() {
const { loading, error, data } = useQuery(gql`
query PersonQuery {
getPerson {
name
}
}
`, {
errorPolicy: 'all'
});
console.log(data);
if (loading) return "Loading...";
if (error) console.log(error);
return (
<h1>{data.getPerson.name}<h1>
)
}
Looking at the console.log(error) result yields the error Cannot return null for non-nullable field Query.getPerson and making it a nullable field just returns { getPerson: null } of course. I've tried returning the resolver results as objects vs functions. Logging within the resolvers shows the Query part is being executed but nothing nested within that.
Am I setting something up incorrectly? I also tried not passing in custom mocks as suggested should be possible based on the graphql-tools docs, but to no avail. I also saw this issue from the apollo hooks GitHub that said the newest version of hooks broke the usage of addMocksToSchema, so I tried using the suggested 3.1.3 version but again no luck. Any help would be greatly appreciated!
You need to provide the mock to the client, not the plain schema.
const schemaWithMocks = addMocksToSchema({
schema,
mocks: {},
preserveResolvers: false,
});
const client = new ApolloClient({
// link: new SchemaLink({ schema }); < -- REPLACE THIS
link: (new SchemaLink({ schema: schemaWithMocks }) as unknown) as ApolloLink, // https://github.com/apollographql/apollo-link/issues/1258
cache: new InMemoryCache(),
connectToDevTools: true,
});
Now console.log(data) prints
{"getPerson": {"__typename": "Person", "name": "Name"}} 🎉

Resources