在next.js应用程序中使用GraphQL的推荐方法
在我的应用程序中，我使用以下NPM模块来玩Strapi、GraphQL和Next.js：
-
null
import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";
const config = {
link: new HttpLink({
uri: "http://localhost:1337/graphql",
})
};
export default withData(config);
然后在一个类组件中，我使用一个静态方法getInitialProps()通过GraphQL查询从Strapi中获取数据。
一切都很好，但也许还有另一个更好的方法，通过反应钩或任何其他？
共有1个答案
我为next.js和graphql找到了一个更好的钩子解决方案。
我想和你分享。我们开始吧。
注意：我假设您已经安装了下一个。js应用程序。如果没有，请遵循本指南。
- @Apollo/React-Hooks
- Apollo-cache-inmemory
- 阿波罗-客户端
- apollo-link-http
- graphql
- graphql-tag
- 同构-不蚀刻
- Next-with-Apollo
1.运行npm命令：
npm install --save @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo
2.创建Appolo配置文件。在文件夹./config中，并将其称为appollo.js。下面的文件代码：
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import withApollo from "next-with-apollo";
import { createHttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";
const GRAPHQL_URL = process.env.BACKEND_URL || "https://api.graphql.url";
const link = createHttpLink({
fetch,
uri: GRAPHQL_URL
});
export default withApollo(
({ initialState }) =>
new ApolloClient({
link: link,
cache: new InMemoryCache()
.restore(initialState || {})
})
);
import React from "react";
import Head from "next/head";
import { ApolloProvider } from "@apollo/react-hooks";
import withData from "../config/apollo";
const App = ({ Component, pageProps, apollo }) => {
return (
<ApolloProvider client={apollo}>
<Head>
<title>App Title</title>
</Head>
<Component {...pageProps} />
</ApolloProvider>
)
};
export default withData(App);
import React from "react";
import { useQuery } from "@apollo/react-hooks";
const Query = ({ children, query, id }) => {
const { data, loading, error } = useQuery(query, {
variables: { id: id }
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {JSON.stringify(error)}</p>;
return children({ data });
};
export default Query;
import React from "react";
import Query from "../components/query";
import GRAPHQL_TEST_QUERY from "../queries/test-query";
const Example = () => {
return (
<div>
<Query query={GRAPHQL_TEST_QUERY} id={null}>
{({ data: { graphqlData } }) => {
return (
<div>
{graphqlData.map((fetchedItem, i) => {
return (
<div key={fetchedItem.id}>
{fetchedItem.name}
</div>
);
})}
</div>
);
}}
</Query>
</div>
);
};
export default Example;
import gql from "graphql-tag";
const GRAPHQL_TEST_QUERY = gql`
query graphQLData {
exampleTypeOfData {
id
name
}
}
`;
export default GRAPHQL_TEST_QUERY;
7.要显示结果，请在./pages文件夹中创建index.js文件（主页），代码如下：
import Example from './components/example';
const Index = () => <div><Example /></div>
export default Index;
仅此而已。享受并扩展您想要的解决方案…
-
在.NET core 2.1.1中，使用以下方法注册应用程序洞察：
-
问题内容： 我已经看到了许多在API上使用注释以将其标记为“需要尽快替换”的示例。 但是，在几乎所有这些情况下，代码开发人员不仅继续使用已弃用的API，而且还抑制了弃用警告。 似乎API开发人员的最佳意图最终是创建更多与已实现的业务逻辑无关的代码- 如果不赞成使用API，但在抑制相关警告的情况下继续使用它，则似乎充其量只是代码的降级，并且在IMHO最差的情况下替换不推荐使用的库时，可能会导致应
-
我使用hystrix api版本1.5.4。我看到的方法已被弃用。替代方法是什么？
-
我使用Cloud ML引擎开发了一个应用程序，可以从上传的图像中识别图像。我想测试应用程序，并允许特定的人上传图像为未来24小时。并非所有用户都有谷歌账户。你应该如何让用户上传图片？ 让用户将图像上传到云存储。使用24小时后过期的密码保护桶 或者 让用户使用24小时后过期的签名网址将图像上传到云存储。
-
我收到此错误，并且尝试将更改为仍然收到不同的错误。
-
问题内容： 不推荐使用此调用： 在源文件中，我可以看到以下内容： 但是我不明白我必须使用哪种方法代替。 问题答案： 您可以在Hibernate 5.2 +中使用以下接口：